<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 300vh;
            background: rgb(255, 255, 255);
        }
        video{
            /* width: 100%; */
            height: 100vh;
            /* object-fit: cover; */
            position: sticky;
            top: 0vh;
            /* mix-blend-mode:exclusion */
            
            
        }
        .page2{
            height: 400vh;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            width: 96vw;
        }
        .page1,.page3{
            height: 150vh;
            background: rgb(99, 79, 79,0.2);
        }
    </style>
</head>
<body>
    <div class="page1">

    </div>
    <div class="page2">
        <video src="https://cdn.jsdelivr.net/npm/electroluxasset/video/origin.mp4"  >
            <source>
        </video>
    </div>
    
    <div class="page3">

    </div>
    <script>
        let element = document.querySelector("video")
        // element.play()
        let allTime
        let curTime
        let radio
        element.addEventListener("canplay",(e)=>{
            allTime = element.duration
            curTime = element.currentTime
            // console.log(allTime,curTime)
            // curTime / allTime
            // let 
            // element.currentTime = radio * allTime
            // element.play()
        })
        
        // 给一个最外层的容器
        let parentElement = document.querySelector(".page2")
        let elementDistance = parentElement.offsetTop
        window.addEventListener("scroll",()=>{
            // 这里是用户的距离
            let scrollDistance = document.documentElement.clientHeight+document.documentElement.scrollTop
            // 滚动超过元素的多少
            let beyondRadio = scrollDistance/(elementDistance+parentElement.offsetHeight)
            // console.log(beyondRadio)
            if(scrollDistance>elementDistance+element.offsetHeight && beyondRadio<1){
                radio = (scrollDistance-elementDistance)/parentElement.offsetHeight
                // console.log(radio)
                element.currentTime = radio * allTime
            }
            
            // beyondRadio
            // console.log(beyondRadio)
            // console.log(parentElement.style.width)
            if(beyondRadio>1 && beyondRadio<1.10){
                console.log(beyondRadio)
                parentElement.style.borderRadius = (beyondRadio-1)/0.1*10+"px"
                parentElement.style.width = (1.1-beyondRadio)/0.1*100+"%"
                // parentElement.offsetWidth = 10
                // border-radius: 10px;
            }
            // console.log(scrollDistance,elementDistance)
        })
        
       
    </script>
</body>
</html>